<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
</head>
<c:set var="principal" value="${sessionScope.ISHOP_PRINCIPAL }"/>
<body>

	<script>
		$(document).ready(function() {
			$("#addProduct").hide();

			$("#addProductExpandBtn").click(function() {
				$("#addProduct").show();
			});

			$("#hideAddProduct").click(function() {
				$("#addProduct").hide();
			});
			
			
			<sec:authorize url="/product/remove.do">
			$("img[name='removeProductBtn']").click(function(){
				var confirmed = confirm("Do you really want to delete this product?");
				if (!confirmed) return;
				var productid = ($(this).attr("productid"));
				alert(productid);
				$.ajax({
					url: "remove.do",
					data: {
						'productId' : productid
					},
					type: 'POST',
					success: function(data) {
						$("#product" + productid).remove();
					},
					error: function(xhr, status) {
						alert('removing product failed with status: ' + status);
					}
					
				});
			});
			</sec:authorize>
			
			$(".saveProductCatBtn").click(function(){
				var confirmed = confirm("Do you really want to save?");
				if (!confirmed) return;
				var productid =($(this).attr("productid"));
				
				var product = {
						id : ($(this).attr("productid")),
						name : ($(this).attr("productname")),
						description :($(this).attr("productdescription")),
						price: ($(this).attr("productprice")),
						category : {
							id: $("tr#product" + ($(this).attr("productid")) + " .select option:selected").val()
						}	
				};
				$.ajax({
					url: "edit.do",
					contentType: 'application/json',
					
					data: JSON.stringify(product),
					type: 'POST',
					success: function(data) {
						
					},
					error: function(xhr, status) {
						alert('editing product failed with status: ' + status);
					}
					
				});
			});
			
			<sec:authorize url="/product/add.do">
			$("#addProductSubmitBtn").click(function() {
				$("#loader").show();
				
				var product = {
						name : $("#productName").val(),
						description : $("#productDescription").val(),
						price: $("#productPrice").val(),
						category : {
							id: $("#productCategory").val()
							}	
				};
				
				$.ajax({
					url: "add.do",
					contentType: 'application/json',
					data: JSON.stringify(product),
					type: 'POST',
					success: function(data) {
						location.reload();
					},
					error: function(xhr, status, errorThrown) {
						alert('adding product failed with status: ' + status + ". " + errorThrown);
						$("#loader").hide();
					}
					
				});
			});
			</sec:authorize>
			
		});
	</script>
	<div style="margin-bottom: 20px">
	<a href="<c:url value="/logout"/>">Logout</a>
	</div>
	<div>
		<table id="productList" class="bordered">
			<thead>
				<tr>
					<th>Name</th>
					<th>Description</th>
					<th>Price</th>
					<th>Category</th>
					
					<sec:authorize url="/product/remove.do">
						<th>Action</th>
					</sec:authorize>
				
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${products}" var="product">
					<tr id="product${product.id}">
						<td>${product.name}</td>
						<td>${product.description}</td>
						<td><fmt:formatNumber maxFractionDigits="2"
								value="${product.price}" /></td>
						<td>
						
						<sec:authorize access="hasRole('ADMIN')">
						
						<select id="categories" name="category" class="select">
								<c:forEach items="${categories}" var="category">
									<option value="${category.id}" ${product.category.id == category.id? 'selected' : ''} >${category.name}</option>
								</c:forEach>
						</select>
						
						<input type="button" class="saveProductCatBtn button" value="Save" productid="${product.id}" productname="${product.name}" productdescription="${product.description}" productprice="${product.price}"/>
						
						
						</sec:authorize>
					
						<sec:authorize ifNotGranted="ADMIN">
							<c:forEach items="${categories}" var="category">
									<c:if test="${category.id == product.category.id}">
									${category.name}
									</c:if>
							</c:forEach>
						
						</sec:authorize>
						</td>
						
						
						<sec:authorize url="/product/remove.do">
							<td><img name="removeProductBtn" src="../images/remove_btn.png" width="24" height="24" productid="${product.id}"/></td>
						</sec:authorize>
						
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
	
	<div id="loader" style="display:none;text-align: center;"">
		<img alt="" src="../images/ajax-loader.gif">
	</div>
	<sec:authorize url="product/add.do">
	<div style="margin-top: 40px">
		<img src="../images/add_btn.png" id="addProductExpandBtn" width="24" height="24" />
		<div id="addProduct" style="margin-top: 20px">
			<a href="#" id="hideAddProduct">hide</a>
			<form action="" method="post" id="adProductForm">
				<label for="productName">Name:</label>
				<input type="text" name="name" id="productName" class="input"/><br/>
				<label for="productDescription">Description:</label>
				<textarea id="productDescription" name="description" class="input"></textarea><br/>
				<label for="productPrice">Price:</label>
				<input type="text" name="price" id="productPrice" class="input"/><br/>
				<label for="productCategory">Category:</label>
				<select id="productCategory" name="category" class="select">
					<c:forEach items="${categories}" var="category">
						<option value="${category.id}">${category.name}</option>
					</c:forEach>
				</select>
				<br/>
				<input type="button" id="addProductSubmitBtn" class="button" value="Submit">
			</form>
			
		</div>
	</div>
	</sec:authorize>
</body>
</html>